<template>
  <div class="template">
     <div class="search">
      <div class="search-center">
        <div class="search-item">
            <Input clearable
            v-model="search.id"
            placeholder="ID"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.nickname"
            placeholder="用户昵称"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.orderNum"
            placeholder="请输入下单数"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.phone"
            placeholder="请输入手机号"
            style="width: 150px;"
            ></Input>
        </div>

         <Button
          style="width: 80px;margin-right: 10px;margin-bottom:5px"
          type="primary"
          icon="ios-search"
          @click="searchFn"
          >查询</Button>
           <Button
          style="width: 80px;margin-right: 10px;margin-bottom:5px"
          type="primary"
          @click="exportDownLoad"
          >导出</Button>
      </div>    
    </div>
    <div class="table">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <template slot="footer">
          <Button size="large" @click="$router.go(-1)">返回</Button>
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
    </div>

  </div>
</template>

<script>
import {apiUserinfoList,apiChangeReferStatus,apiUserinfoExport} from '@/api/user-manage.js'
export default {
  name: 'user-manage',
  data () {
    return {
      query:{},
      search: {
        nickname:'',
        phone:'',
        id:'',
        pageNo: 1,
        pageSize: 10,
        orderNum:'',
      },
      diyDom:{
        showModal:false
      },
      diyData: {
        orderNo:'',
        columns: [
          {
            title: 'ID',
            width:'100px',     
            key: 'id',  
          },
          {
            title: '头像',
            width:'120px',
           render: (h, params) => {
              return h('img', {
                    attrs: {
                        src: params.row.headImgUrl,
                    },
                    style: {
                        width: '50px',
                    },
                })
             }
          },
           {
            title: '昵称',
            width:'150px',
            key: 'phone',
             render: (h, params) => {
              return h('div', [
                h('p', params.row.realname||params.row.nickname||params.row.username)
              ])
             }
          },
          {
            title: '手机号',
            width:'150px',
           render: (h, params) => {
              return h('div', [
                h('p', params.row.phone),
              ])
             }
          },
          {
            title: '当前积分',
            width:'100px',
            key: 'score',
          },
          {
            title: '下单数量',
            width:'100px',
            key: 'orderNum',
          },
          {
            title: '订单金额',
            width:'100px',
            key: 'orderAmount',
          },
          {
            title: '当前积分',
            width:'100px',
            key: 'score',
          },
          // {
          //   title: '推广总计',
          //   width:'100px',
          //   key: 'referrerTotal',
          //   render: (h, params) => {
          //     return h('div', [
          //           h(
          //             'a',
          //             {
          //               style: {
          //                 color: '#2D8cF0',
          //                 marginRight: '10px'
          //               },
          //               on: {
          //                 click: () => {
          //                   this.$router.push({
          //                     name: "user-promote",
          //                     query: {
          //                         id: params.row.id,

          //                     },
          //                   }); 
          //                 }
          //               }
          //             },
          //             params.row.referrerTotal
          //           ),
          //     ])
          //   }
          // },
          {
            title: '一级',
            width:'100px',
            key:'referrerLv1',
            render: (h, params) => {
              return h('div', [
                    h(
                      'a',
                      {
                        style: {
                          color: '#2D8cF0',
                          marginRight: '10px'
                        },
                        on: {
                          click: () => {
                            this.query.referrerId=params.row.id
                            this.searchFn()
                          }
                        }
                      },
                      params.row.referrerLv1
                    ),
              ])
            }
          },
          {
            title: '二级',
            width:'100px',
            key: 'referrerLv2',
            render: (h, params) => {
              return h('div', [
                    h(
                      'a',
                      {
                        style: {
                          color: '#2D8cF0',
                          marginRight: '10px'
                        },
                        on: {
                          click: () => {
                            this.query.referrer2Id=params.row.id
                            this.searchFn()
                          }
                        }
                      },
                      params.row.referrerLv2
                    ),
              ])
            }
          },
          {
            title: '三级',
            width:'100px',
            key: 'referrerLv3',
            render: (h, params) => {
              return h('div', [
                    h(
                      'a',
                      {
                        style: {
                          color: '#2D8cF0',
                          marginRight: '10px'
                        },
                        on: {
                          click: () => {
                            this.query.referrer3Id=params.row.id
                            this.searchFn()
                          }
                        }
                      },
                      params.row.referrerLv3
                    ),
              ])
            }
          },
          {
            title: '推广状态',
            width:'100px',
            key: 'referrerStatus',
            render: (h, params) => {
              return h('div', [
                h('p',params.row.referrerStatus==1?'已开启':'已关闭'),
              ])
             }
          },
          {
            title: '注册时间',
            width:'200px',
            key: 'createTime',
          },
          {
            title: '最后登录时间',
            width:'200px',
             key: 'lastLoginTime',
          },

       
           {
            title: '操作',
            width:'300px',
            fixed: 'right',
            render: (h, params) => {
                  return h('div', [
                    h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                  this.$Modal.confirm({
                                    title: '提示',
                                    content: `是否确认${params.row.referrerStatus==1?'关闭':'开启'}推广`,
                                    onOk: () => {
                                      apiChangeReferStatus({ id: params.row.id,referrerStatus:params.row.referrerStatus==1?0:1 }).then(() => {
                                        this.$Message.success('成功')
                                        this.getTableList()
                                      })
                                    }
                                  })
                              }
                          },                            
                        },
                      params.row.referrerStatus==1?'关闭推广':'推广'
                      ),
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                  this.$router.push({
                                    name: "points-details",
                                    query: {
                                        userId: params.row.id,
                                    },
                                  });
                              }
                          },                            
                        },
                      '积分明细'
                      ),
                       h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                  this.$router.push({
                                    name: "user-order",
                                    query: {
                                        userId: params.row.id,
                                    },
                                  });
                              }
                          },                            
                        },
                      '查看订单'
                      ),
                  ])
                }
          },
        ]
      },
      apiData: {
        total: 0,
        infor:null,
        tableList: [], 
      }
    }      
  },
  methods: {
        // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    }, 
    getTableList(){
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search,...this.query }
      apiUserinfoList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data
        
        this.apiData.tableList = list
        this.apiData.total = totalCount
      }).finally(() => this.$store.commit('setSpinShow', false))
    },
    exportDownLoad(){
      this.$store.commit('setSpinShow', true)
      console.log(11)
				apiUserinfoExport({...this.search}).then(res => {
						// this.diyDom.showExport = false
						const { data } = res
						const blob = new Blob([data])
						let disposition = decodeURI(res.headers['content-disposition'])
						// 从响应头中获取文件名称
						let fileName = disposition.substring(disposition.indexOf('fileName=') + 22, disposition.length)
						let text = fileName
						if ('download' in document.createElement('a')) {
							// 非IE下载
							const elink = document.createElement('a')
							elink.download = text.substring(0, text.length - 1)
							elink.style.display = 'none'
							elink.href = URL.createObjectURL(blob)
							document.body.appendChild(elink)
							elink.click()
							URL.revokeObjectURL(elink.href) // 释放URL 对象
							document.body.removeChild(elink)
						} else {
							// IE10+下载
							navigator.msSaveBlob(blob, fileName)
						}
					})
					.finally(() => this.$store.commit('setSpinShow', false))
    },

  },
   mounted () {
    this.query=this.$route.query
    this.getTableList()
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.button-border{
  margin-right: 10px;
  
}
</style>
 